<template>
  <div class="ES-header">
    <div class="ES-header-container">
      <div class="ES-search">
        <a class="title">ES影视</a>
        <div class="search-container">
          <el-input placeholder="输入查询内容" v-model="content" @keyup.enter.native="searchMovie">
            <el-button slot="append" icon="el-icon-search" @click="searchMovie"></el-button>
          </el-input>
        </div>
        <div style="padding-right: 20px;float: right;padding-top: 20px">
          <el-button type="success" @click="loginOut" round>退出登录</el-button>
          </div>
      </div>
    </div>
    <div class="ES-bar">
      <el-tabs v-model="title" @tab-click="choiceUrl">
        <el-tab-pane v-for="(bar,idx) in barList" :label="bar.title" :key="idx"/>
      </el-tabs>
    </div>
    </div>
</template>

<script>
export default{
  data () {
    return {
      title: '-1',
      content: '',
      name: this.$cookies.get('username')
    }
  },
  props: {
    barList: Array
  },
  methods: {
    choiceUrl () {
      let bar = this.barList[this.title]
      this.$store.dispatch(bar.autoAction)
      this.$router.push(bar.url)
    },
    searchMovie () {
      console.log('start loading and the search text is ' + this.content)
      console.log(this.$store.getters.user.name)
      console.log(this.$cookies.get('token'))
      this.$store.commit('SEARCH_TEXT', {searchText: this.content})
      this.$store.dispatch('searchMovieList')
      this.$store.commit('SEARCH_LOADING', {loading: true})
      this.$router.push({path: '/home/search', query: {searchText: this.content}})
    },
    loginOut () {
      this.$cookies.remove('username')
      this.$cookies.remove('token')
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "../../../style/color";
.ES-header{
  background: @mainColor;
  width: 100%;
  height: 120px;
  .ES-bar{
    width: 950px;
    margin: 0 auto;
    height: 20px;
    .el-tabs__item.is-active{
      color: #901371;
    }
    .el-tabs__active-bar{
      background-color:rgb(73,178,82);
    }
    .el-tabs__nav-scroll {
       background-color: @mainColor;
     }
    .el-tabs__item{
      width: 100px;
    }
  }
  .ES-header-container{
    width: 950px;
    margin: 0 auto;
    border-bottom: 1px solid @line;
    .ES-search{
      width: 950px;
      margin: 0;
      height: 75px;
      alignment: left;
      .title{
        color: @ESColor;
        font-size: 30px;
        font-weight: bold;
        line-height: 75px;
      }
      .search-container{
        display: inline-block;
        line-height: 75px;
        vertical-align: top;
        width: 500px;
        margin-left: 50px;
        input{
          height: 34px;
        }
      }
    }
  }
}
</style>
